<ion-header>
  <ion-toolbar class="orange-bar">
    <ion-buttons slot="start">
      <ion-button color="light" (click)="goBack()">
        <ion-icon name="ios-arrow-back"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-title>{{bid['title']}}({{bid['id'] | bidCode}})</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-item *ngIf="welfareTable" lines="none" class="dingxiangbiao">
    <i class="iconfont icon-licaishouyi"></i>
    <ion-label>定向标</ion-label>
  </ion-item>
  <!-- 标的信息 -->
  <ion-grid class="custom-grid">
    <ion-row text-center>
      <ion-col>
        <p class="color-gray">期限</p>
        <p class="px24">{{bid['period']}}{{bid['periodUnit']}}</p>
      </ion-col>
      <ion-col class="left-divider">
        <p class="color-gray">参考年收益率</p>
        <p class="color-orange px24">{{bid['apr']}}%</p>
      </ion-col>
    </ion-row>
    <ion-row text-center class="color-gray">
      <ion-col size="4">
        <p class="color-blue">{{bid['minInvestAmount'] | tenThousand}}元</p>
        <p>起投金额</p>
      </ion-col>
      <ion-col size="3">
        <p class="color-blue">{{bid['repaymentType']}}</p>
        <p>还款方式</p>
      </ion-col>
      <ion-col size="5">
        <div *ngIf="bidCountDown > 0; then thenBlock else elseBlock"></div>
        <ng-template #thenBlock>
          <p class="color-blue" style="font-size: 12px;padding: 1px 0 2px;">{{bidCountDown | countDown}}</p>
          <p>剩余时间</p>
        </ng-template>
        <ng-template #elseBlock>
          <p class="color-blue">{{investExpireTime | date:'yyyy-MM-dd'}}</p>
          <p>截止日期</p>
        </ng-template>
      </ion-col>
    </ion-row>
  </ion-grid>
  <!-- 进度信息 -->
  <ion-item lines="none">
    <ion-label>
      <div class="progress-box">
        <div class="progress-min-max min">投标进度</div>
        <div class="progress-container">
          <div class="progress-bar"></div>
          <div class="progress-bar progress-bar-active" [ngStyle]="bar_right"></div>
          <div class="progress-knob-handle" [ngStyle]="knob_left">
            <div class="progress-pin">{{bid['loanSchedule']}}%</div>
            <div class="progress-knob"></div>
          </div>
        </div>
        <div class="progress-min-max max">100%</div>
      </div>
      <div class="progress-info">
        <span>总金额：<span class="color-orange">{{bid['amount'] | tenThousand}}元</span></span>
        <span float-right>可投余额：<span class="color-orange">{{canPerchaseAmout | tenThousand}}元</span></span>
      </div>
    </ion-label>
  </ion-item>
  <!-- 其它信息入口 -->
  <ion-list lines="inset">
    <ion-item detail [routerDirection]="'forward'" [routerLink]="['/bid/detail', {bidIdSign: bid['bidIdSign']}]">
      <ion-icon name="filing" color="tertiary" slot="start"></ion-icon>
      <ion-label>借款详情</ion-label>
    </ion-item>
    <ion-item detail [routerDirection]="'forward'" [routerLink]="['/bid/record', {bidIdSign: bid['bidIdSign']}]">
      <ion-icon name="paper" color="tertiary" slot="start"></ion-icon>
      <ion-label>投标记录</ion-label>
    </ion-item>
    <ion-item detail [routerDirection]="'forward'" [routerLink]="['/bid/plan', {bidIdSign: bid['bidIdSign']}]">
      <ion-icon name="calendar" color="tertiary" slot="start"></ion-icon>
      <ion-label>回款计划</ion-label>
    </ion-item>
  </ion-list>
</ion-content>

<ion-footer>
  <ion-row>
    <ion-col size="2" class="icon-btn-box" (click)="openCalculator()">
      <ion-icon name="ios-calculator" color="tertiary"></ion-icon>
      <span>计算器</span>
    </ion-col>
    <ion-col size="10" text-center>
      <ion-button *ngIf="bid['status'] === 1 && bidCountDown <= 0; else disabledBlock" color="tertiary" (click)="openPurchase()">立即投资</ion-button>
      <ng-template #disabledBlock>
        <ion-button [color]="bid['status'] === 1 ? 'tertiary' : 'medium'" [disabled]="true">{{bid['status'] === 1 ? '预售中' : '已满标'}}</ion-button>
      </ng-template>
    </ion-col>
  </ion-row>
</ion-footer>
<!-- 计算器 -->
<app-action-panel #calculatorPanel>
  <app-calculator [bid]="bid" (closeEmit)="closeCalculator()"></app-calculator>
</app-action-panel>

<!-- 立即投资 -->
<app-action-panel #purchasePanel>
  <header class="purchase-header">
    <button (click)="closePurchase()"><ion-icon name="close"></ion-icon></button>
    <span class="title">立即投资</span>
  </header>
  <ion-list class="purchase-list">
    <ion-item>
      <ion-label>
        <span class="custom-label">现在投资</span>
        <span class="color-blue">{{bid['title']}}({{bid['id'] | bidCode}})</span>
      </ion-label>
    </ion-item>
    <ion-item>
      <ion-label class="custom-label">投资金额</ion-label>
      <ion-input type="tel" maxlength="10" [(ngModel)]="investAmt" (ionChange)="amountInput($event)"></ion-input>
      <ion-note slot="end" class="content">元</ion-note>
    </ion-item>
    <ion-item *ngIf="welfareTable">
      <ion-label class="custom-label">福利密码</ion-label>
      <ion-input type="password" maxlength="10" [(ngModel)]="password" placeholder="请输入福利密码"></ion-input>
    </ion-item>
    <ion-item *ngIf="userBalance">
      <ion-label class="custom-label">
        <span class="custom-label">账户余额</span>
        <ion-text color="tertiary">{{userBalance}} 元</ion-text>
      </ion-label>
      <ion-button slot="end" fill="clear" color="primary" (click)="allPurchase()">全部投资</ion-button>
    </ion-item>
    <ion-item detail *ngIf="redpackets && redpackets.length > 0" (click)="openRedpackets('redpackets')">
      <ion-label>
        <span class="custom-label">红包</span>
        <ion-text color="tertiary" *ngIf="currGrant && !currGrant['apr'];else redpacketsBlock">
          {{currGrant['red_packet_name'] + currGrant['amtStr']}}
        </ion-text>
        <ng-template #redpacketsBlock>
          <span class="content">
            {{(redpackets && redpackets.length > 0) ? redpackets.length + '个投资红包可用' : '暂无可用红包'}}
          </span>
        </ng-template>
      </ion-label>
    </ion-item>
    <ion-item detail *ngIf="coupons && coupons.length > 0" (click)="openRedpackets('coupons')">
      <ion-label>
        <span class="custom-label">加息券</span>
        <ion-text color="tertiary" *ngIf="currGrant && currGrant['apr'];else couponsBlock">
          {{currGrant['amtStr']}}
        </ion-text>
        <ng-template #couponsBlock>
          <span class="content">
            {{(coupons && coupons.length > 0) ? coupons.length + '张加息券可用' : '暂无可用加息券'}}
          </span>
        </ng-template>
      </ion-label>
    </ion-item>
  </ion-list>
  <div class="agree-box">
    <ion-checkbox slot="start" [(ngModel)]="isAgree"></ion-checkbox>
    <span>我已阅读并同意<a class="color-orange" (click)="openAgreement()">《{{investAgrees['title']}}》</a></span>
  </div>
  <div padding text-center>
    <a class="link-btn bg-orange" (click)="doPurchase()">确定</a>
  </div>
</app-action-panel>
